<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <h3>苹果 10 ￥ / 斤, 折扣 《8折》</h3>
    <p>
      请输入你要购买的斤数
      <input type="text" v-model="jin" />
    </p>
    <button @click="settle">结账买单~</button>
    <p>
      结账单:总价 <i>{{ total }}</i> ￥元 折后价: <i>{{ total * 0.8 }}</i> ￥元
      省了: <i>{{ total * 0.2 }}</i> ￥元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jin: "",
      total: "",
    };
  },
  methods: {
    settle() {
      this.total = this.jin * 10;
    },
  },
};
</script>

<style>
div {
  margin-top: 50px auto;
  text-align: center;
}
</style>